<template>
  <el-button class="refresh-button" :disabled="loading">
    <div class="icon" :class="{ 'refresh-button__animation': loading }">
      <basic-icon name="refresh-icon" size="14px" color="#595E70"></basic-icon>
    </div>
  </el-button>
</template>

<script setup lang="ts">
interface IProps {
  loading?: boolean
}

defineProps<IProps>()
</script>

<style scoped lang="scss">
@keyframes loading {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.refresh-button {
  @apply w-[30px] h-[30px];

  .icon {
    @apply w-[14px] h-[14px];

    transform-origin: 49% 45%;
  }

  &__animation {
    animation: loading 1s ease-out infinite forwards;
  }
}
</style>
